<template>
  <div style="height: 44px; width: 100%;"></div>
  <div class="pageHeader active">
    <div class="pageContainer2">

      <div class="logo" @click="router.push('/')">
        <img class="img img1" :src="systemDto.topLogoUrl"/>
        <img class="img img2" src="@/assets/images/index/logo2.png"/>
      </div>

      <div class="headerRight">
        <div class="left">
          <!--<div class="item" style="">-->
            <!--<img class="icon img1" src="@/assets/images/index/icon1.png"/>-->
            <!--<img class="icon img2" src="@/assets/images/index/icon1_1.png"/>-->
          <!--</div>-->
          <div class="item" style="">
            <el-dropdown @command="handleCommand" style="outline: none;">
              <span class="el-dropdown-link"
                    style="outline: none; display: flex; align-items: center; color: #333;">
                <img class="icon img1" src="@/assets/images/index/icon2.png"/>
                <img class="icon img2" src="@/assets/images/index/icon2_1.png"/>
                <span class="text" style="padding-left: 0.2vw"> {{currentLan}}</span>
              </span>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="lang in langs" :command="lang">{{ lang.title }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </div>
        <div class="right">
          <el-icon :size="18" @click="drawer = true">
            <Expand v-if="!drawer" />
            <Fold v-if="drawer" />
          </el-icon>
        </div>
      </div>
    </div>
  </div>


  <el-drawer
    v-model="drawer"
    :title="$t('common.menu')"
    direction="ltr"
    class="menuWrap"
    :before-close="handleClose"
  >
    <div class="menu">
      <div
        class="item"
        v-for="(item, index) in menuList"
        @click="linkTo(item.url)"
        :class="{'active': route.path === item.url}">
        <div>{{item.name}}</div>
        <div>
          <el-icon :size="16" @click="drawer = true">
           <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
  </el-drawer>

</template>
<script setup>
  import {ref, watchEffect, onMounted} from 'vue'
  import {langs} from '../locales'
  import {useLocaleStore} from '../store/locales.js'
  import {useRouter, useRoute} from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()

  const drawer = ref(false)

  const useLocale = useLocaleStore()


  let curLocale = useLocale.locale
  let currentLan = ref(langs.find((cur) => cur.key === curLocale)?.title || '')

  const scrollHeight = ref(0)
  const menuList = ref([])
  const systemDto = ref({})

  watchEffect(() => {
    scrollHeight.value = useLocale.scrollHeight
    menuList.value = useLocale.menuList
    systemDto.value = useLocale.systemDto
  })
  onMounted(() => {
    if (route.query.language == 1 || route.query.language == 2) {
      let curVal = route.query.language == 2 ? 'en' : 'zh'
      currentLan.value = langs.find((cur) => cur.key === curVal)?.title || ''
    }
  })

  function handleCommand(command) {
    currentLan.value = command.title
    useLocale.setLocale(command.key)
    let lsLocale = {
      curLocale: command.key
    }
    localStorage.setItem('locale', JSON.stringify(lsLocale))
    // if (route.query.id) {
    //   location.href = `/shenwei/#${route.path}?id=${route.query.id}&language=${lsLocale.curLocale === 'en' ? 2 : 1}`
    // } else {
    //   location.href = `/shenwei/#${route.path}?language=${lsLocale.curLocale === 'en' ? 2 : 1}`
    // }
    // setTimeout(() => {
    //   location.reload()
    // }, 100)
    location.reload()
  }

  // 路由跳转
  const linkTo = (url) => {
    routerLink(url)
    handleClose()
  }

  const handleClose = () => {
    drawer.value = false
  }

</script>
<style lang="scss">
  .menuWrap{
    width: 66%!important;
    .el-drawer__title{
      font-size: 14px;
    }
    .el-drawer__header{
      margin-bottom: 0px; padding: 15px 15px 10px;
    }
    .el-drawer__body{
      padding: 10px;
    }
    .menu{
      .item{
        font-size: 14px; display: flex; justify-content: space-between;border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        line-height: 36px; color: #444; padding: 0 10px;
        &.active{
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }
</style>
<style scoped lang="scss">
  .pageHeader {
    height: 44px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: fixed;
    z-index: 9;
    width: 100%; left: 0; top: 0;

    &.active {
      color: #1A1A25;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      .pageContainer2{
        .logo {
          .img {
            &.img1 {
              display: none;
            }
            &.img2 {
              display: block;
            }
          }
        }
        .headerRight {
          .left {
            .item {
              .icon {
                width: 16px;
                &.img1 {
                  display: none;
                }
                &.img2 {
                  display: block;
                }
              }
            }
          }
          .right {
            border-left: 1px solid #eee;
            .imgWrap {
              .img {
                &.img1 {
                  display: none;
                }
                &.img2 {
                  display: block;
                }
              }
            }
          }
        }
      }
    }

    .pageContainer2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 10px 0;
      .logo {
        width: 110px;
        height: auto;
        .img {
          display: inline-block;
          width: 100%;
          &.img1 {
            display: block;
          }
          &.img2 {
            display: none;
          }
        }
      }

      .headerRight {
        display: flex; padding-top: 2px;
        .left {
          display: flex;
          align-items: center;
          padding: 0 5px;
          font-size: 14px;
          .item {
            display: flex;
            cursor: pointer;
            align-items: center;
            padding: 0 5px;
            .icon {
              width: 16px;
              &.img1 {
                display: block;
              }
              &.img2 {
                display: none;
              }
              img {
                width: 100%;
                display: inline-block;
              }
            }
          }
        }
        .right {
          border-left: 1px solid rgba(255, 255, 255, 0.3);
          width: 30px; height: 20px; display: flex; align-items: center; justify-content: center;
        }
      }
    }
  }
</style>
